<table class="layui-hide" id="mytable" lay-filter="mytable"></table>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" lay-event="add">添加管理员</button>
    </div>
</script>
<script type="text/html" id="optbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="statusSwitchTpl">
    <input type="checkbox" name="status" value="{{d.status}}" data-id="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="checkStatus" {{d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/javascript">
    $(function(){
        ybTable.render({
            elem: '#mytable'
            ,url: "{:url('getDataList')}"
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter']
            ,title: '数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', width:80, title: 'ID'}
                ,{field:'username', title: '账号'}
                ,{field:'status', title: '状态', templet: '#statusSwitchTpl',}
                ,{field:'create_time', title: '创建时间'}
                ,{fixed: 'right', title:'操作', toolbar: '#optbar', width:150}
            ]]
            ,page: true
            ,response: {
                statusCode: 1 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.dataList //解析数据列表
                };
            }
        });

        //头工具栏事件
        ybTable.on('toolbar(mytable)', function(obj){
            switch(obj.event){
                case 'add':
                    ybLayer.open({
                        title: ['添加', 'font-size: 16px;font-weight: bold;'],
                        type: 2,
                        area: ['80%', '70%'],
                        fix: false,
                        scrollbar: false,
                        maxmin: true,
                        shade: [0.5, '#ffffff'],
                        shadeClose: false,
                        skin: 'layui-layer-rim',
                        content: "{:url('add', false, false)}"
                    });
                    break;
            }
        });

        //监听行工具事件
        ybTable.on('tool(mytable)',function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                ybLayer.open({
                    title: ['修改', 'font-size: 16px;font-weight: bold;'],
                    type: 2,
                    area: ['50%', '70%'],
                    fix: false,
                    scrollbar: false,
                    maxmin: true,
                    shade: [0.5, '#ffffff'],
                    shadeClose: false,
                    skin: 'layui-layer-rim',
                    content: "{:url('edit', false, false)}" + '?id=' + data.id
                });
                return false;
            }else if(obj.event === 'del'){
                ybLayer.confirm('确认要删除么', function(index){
                    ybLayer.close(index);
                    ajaxPost("{:url('del')}",{'id':data.id},function(res){
                        ybLayer.msg(res.msg,{icon: 6});
                        setTimeout(function () {
                            ybTable.reload('mytable');
                        }, 1000);
                    },function(res){
                        ybLayer.msg(res.msg,{icon: 5});
                    })
                    return false;
                });
            }
        });

        //状态
        ybForm.on('switch(checkStatus)', function(obj){
            ajaxPost("{:url('editStatus')}",{'id':$(this).data('id'),'status':obj.elem.checked?1:0},function(res){
                ybLayer.msg(res.msg,{icon: 6});
                setTimeout(function () {
                    ybTable.reload('mytable');
                }, 1000);
            },function(res){
                ybLayer.msg(res.msg,{icon: 5});
                setTimeout(function () {
                    ybTable.reload('mytable');
                }, 1000);
            })
            return false;
        });
    })
</script>